<template>
	<view class=" big-box">
		<top-navigation :isBack="true" bgColor="#17171F00" isFix isShow>
			<view slot='center-slot' class="left-slot">
				联系店长
			</view>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<view class="content">
			<view class="content-box justify-start" v-for="v,k in callList">
				<image class="avatar" :src="imgHost+v.avatar" mode=""></image>
				<view class="r-call-info">
					<view class="acea-row justify-start align-center">
						<view class="call-name">
							{{v.nickname}}
						</view>
						<image class="level" :src="imgHost+v.shop_icon" mode="widthFix"></image>
						<view class="call-id">
							(ID:{{v.code}})
						</view>
					</view>
					<view class="contact-infos justify-start">
						<view class="infobox justify-start align-center" @tap="myCopy(v.wx,'w')">
							<image class="wx-qq-icon" src="/static/images/yishou/wx.png" mode="widthFix"></image>
							<view class="line1">
								{{v.wx}}
							</view>

						</view>
						<view class="infobox qqinfo justify-start align-center" @tap="myCopy(v.qq,'q')">
							<image class="wx-qq-icon" src="/static/images/yishou/qq.png" mode="widthFix"></image>
							<view class="line1">
								{{v.qq}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//在需要加、解码的的文件里引入【注意替换成自己的路径】
	import {
		Base64
	} from '@/utils/plugs/imgOrBase64.js';
import {
	imgHost
} from '@/config/config.js'
	// let msg = 'Hello, base64！我是威叔~~_~!';

	// let encodeStr = Base64.encode(msg); //加密
	// console.log(encodeStr);

	// let decodeStr = Base64.decode(encodeStr);//解码
	// console.log(decodeStr);
	import validate from 'common/js/validate.js';
	import auth from 'common/js/auth.js';
	import globalConfig from '@/common/js/golbalConfig.js';
	import {
		randomString
	} from '../../utils/libs.js'
	import base64Arraybuffer from 'base64-arraybuffer'
	export default {
		data() {
			return {
				imgHost,
				callList:[],
			};
		},
		mixins: [auth, globalConfig],

		onLoad(option) {
			let that = this
			this.getStatic()
			// try {
			// 	const value = uni.getStorageSync('token');
			// 	if (value) {
			// 		that.$navto('/pages/index/index')
			// 	}
			// } catch (e) {
			// 	// error
			// }

			// // this.getCaptcha()

			// if (uni.getStorageSync('authInfo')) {
			// 	this.authInfo = uni.getStorageSync('authInfo');
			// 	this.checkOpenidIsExits();
			// }

		},
		onShow() {

		},
		onReady() {
			// this.getStatic()
		},
		methods: {
			myCopy(value, wxorqq) {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					showToast:false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message:wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制',
							type:'default',
							duration:'500'
							
						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			async getStatic() {
				let {
					code,
					msg,
					data
				} = await this.$getRequest('/api/v1/shop_list')
				if (code == 200) {
					console.log(data, '静态资源');
					this.callList = data.list || []
				} else {
					// this.$refs.uToast.show({
					// 	message: msg
					// })
				}

			},

		}
	};
</script>

<style>
	@import '/common/css/common.css';
</style>

<style lang="scss" scoped>
	.big-box {
		width: 100vw;
		background: linear-gradient(180deg, #152435 0%, #16161E 100%);
		min-height: 100vh;

		.left-slot {
			color: #FFF;
		}

		.content {
			color: #D0D1D3;
			padding: 26rpx 50rpx 26rpx 32rpx;

			.content-box {
				margin-bottom: 80rpx;

				.r-call-info {
					flex: 1;
				}

				.contact-infos {
					color: rgba(255, 255, 255, .4);
					margin-top: 28rpx;

					.wx-qq-icon {
						width: 30rpx;
						margin-right: 8rpx;
					}

					.qqinfo {
						margin-left: 32rpx;
					}

					.infobox {
						width: 212rpx;
						border-radius: 8rpx;
						background-color: rgba(255, 255, 255, .11);
						padding: 12rpx 28rpx;
						font-size: 24rpx;
						flex-wrap: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						.line1 {
							max-width: 112rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}

			.avatar {
				width: 128rpx;
				height: 128rpx;
				border-radius: 26rpx;
				margin-right: 28rpx;
			}

			.acea-row {
				.call-name {
					max-width: 6.25rem;
					line-height: 1.25rem;
					color: #fff;
					font-size: .875rem;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.call-id {
					flex: 1;
					text-align: right;
					color: rgba(255, 255, 255, .4);
					font-size: .75rem;
					line-height: 1.125rem;
				}

				.level {
					width: 114rpx;
					height: 32rpx;
					margin: 0 10rpx;
				}
			}
		}
	}
</style>